<template>
  <el-dialog
    title="添加会员"
    :visible.sync="visible"
    width="500px"
    top="20vh"
    :before-close="
      () => {
        $emit('close');
      }
    "
  >
    <el-form :model="form" :rules="rules" ref="vipform" label-width="100px">
      <el-form-item label="公司名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="username">
        <el-input type="tel" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="district">
        <el-cascader
          style="width:300px;"
          expand-trigger="hover"
          :options="cityList"
          v-model="form.district"
          :change-on-select="true"
          value="cityid"
          :props="{
            value: 'n',
            label: 'n',
            children: 'c'
          }"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="联系电话" prop="mobile">
        <el-input type="tel" v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="营业执照">
        <img
          style="width:100px;height:100px;object-fit:cover;"
          @click="form.lisence = null"
          v-if="form.lisence"
          :src="form.lisence"
          alt=""
        />
        <label v-else class="upload-btn" for="vip-uploads">
          点击上传
          <input
            type="file"
            id="vip-uploads"
            @change="selectImg"
            style="position:absolute; clip:rect(0 0 0 0);"
            accept="image/*"
          />
        </label>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addVipUser } from "@/api/user-mng";
import { fileUpload } from "@/api/file";
import city from "@/utils/citys.js";
export default {
  name: "",
  props: ["visible", "id"],
  data() {
    return {
      form: {
        name: "",
        username: null,
        district: [],
        mobile: null,
        lisence: null
      },
      cityList: city,
      rules: {
        name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        username: [
          { required: true, message: "请输入手机号", trigger: "change" }
        ],
        district: [
          {
            type: "array",
            required: true,
            message: "请选择地区",
            trigger: "change"
          }
        ],
        mobile: [
          { required: true, message: "请输入联系电话", trigger: "change" }
        ]
      }
    };
  },

  computed: {},

  watch: {
    visible: function(val) {
      if (val) {
      } else {
        this.userDetail = {};
      }
    }
  },

  methods: {
    submit() {
      this.$refs.vipform.validate(valid => {
        if (valid) {
          if (!this.form.lisence) {
            this.$message.error("请上传营业执照");
            return;
          }
          addVipUser({
            username: this.form.username,
            mobile: this.form.mobile,
            name: this.form.name,
            img: this.form.lisence,
            district: this.form.district.join("")
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.$emit("close");
            }
          });
        } else {
          return false;
        }
      });
    },
    selectImg(e) {
      let formData = new FormData();
      formData.append("file", e.target.files[0]);
      fileUpload(formData).then(res => {
        if (res.code === 200) {
          this.form.lisence = res.data.file;
        }
      });
    }
  },

  created() {},

  components: {}
};
</script>
<style lang="scss" scoped>
div {
  span {
    display: inline-block;
    width: 300px;
    line-height: 60px;
  }
}
</style>
